<template>
	<view class="fun-flex-col fun-justify-between page">
		<view class="fun-flex-col group">
			<view class="fun-flex-col">
				<view class="fun-flex-col fun-justify-start fun-items-start fun-self-stretch fun-relative group_4">
					<view class="fun-flex-col fun-justify-start fun-items-start text-wrapper pos_2">
						<text class="font text_3">U.S. Growth Equity</text>
					</view>
				</view>
				
				<view class="fun-flex-col fun-self-stretch group_6">
					<view class="fun-flex-col mt-15">
						<view class="fun-flex-col section">
							<text class="fun-self-start font text_6">Sum of money bought</text>
							<view class="fun-mt-20 fun-flex-row fun-items-baseline fun-self-stretch group_8">
								<text class="text_7">$</text>
								<input class="fun-ml-10 font_2 text_8 text_9" placeholder="Minimum purchase amount is $10,000"/>
							</view>
							<view class="fun-mt-20 fun-self-stretch divider"></view>
						</view>
						<view class="fun-mt-16 fun-flex-col section_2">
							<view class="fun-flex-row fun-justify-between fun-items-end fun-self-stretch">
								<text class="font text_11">Payment</text>
								<view class="fun-flex-row fun-items-center">
									<image class="fun-shrink-0 image_4"
										src="../../static/5081bab46580d0bf3d065309bde33624.png" />
									<text class="text_10">My wallet</text>
									<image class="fun-shrink-0 image_5"
										src="../../static/1a2fa01dd9b54d7c54bff2be6064308a.png" />
								</view>
							</view>
							<text class="fun-mt-4 fun-self-end text_8 text_12">Available amount : $10,000</text>
						</view>
					</view>
				</view>
				<text class="fun-self-stretch font_3 text_8 text_13">
					(To protect your investment interests, pleaseread the full prospectus and otherdocuments before making investmentdecisions)
				</text>
			</view>
		</view>
		<view class="fun-flex-col section_3">
			<view class="fun-flex-row group_9">
				<view class="fun-shrink-0 fun-self-start section_4"></view>
				<view class="fun-ml-12 fun-flex-1 fun-self-center group_10">
					<text class="font_5">Clicking OK means that you are aware of the</text>
					<text class="font_4 text_15">Product Contracts</text>
					<text class="font_5 text_14">and the notice of investor'srights and interests, etc.</text>
				</view>
			</view>
			<view class="fun-flex-col fun-justify-start fun-items-center text-wrapper_2" @click="confirm">
				<text class="text_16">OK</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {},
		data() {
			return {};
		},

		methods: {
			confirm(){
				uni.navigateTo({url:`/pages/myPositions/purchaseSuccess`})
			}
		},
	};
</script>

<style scoped lang="scss">
	.ml-5 {
		margin-left: 10rpx;
	}

	.mt-25 {
		margin-top: 50rpx;
	}

	.mt-15 {
		margin-top: 30rpx;
	}

	.mt-160 {
		margin-top: 320rpx;
	}

	.page {
		padding-top: 32rpx;
		background-color: #00033b;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.group {
			padding: 0 32rpx;

			.group_2 {
				padding-left: 36rpx;

				.text {
					color: #ffffff;
					font-size: 30rpx;
					font-family: SF Pro Text;
					font-weight: 600;
				}

				.image {
					width: 34rpx;
					height: 22rpx;
				}

				.image_2 {
					width: 30rpx;
					height: 22rpx;
				}

				.image_3 {
					width: 48rpx;
					height: 22.66rpx;
				}
			}

			.group_3 {
				padding-top: 16rpx;

				.pos {
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}

				.text_2 {
					color: #ffffff;
					font-size: 32rpx;
					font-family: SF Pro Display;
					font-weight: 300;
				}
			}

			.group_4 {
				padding: 62rpx 0 18rpx;

				.group_5 {
					margin-left: 14rpx;
					filter: blur(3.5rpx);
					width: 214rpx;
					height: 8rpx;
				}

				.text-wrapper {
					padding: 32rpx 0;
					background-color: #1b1d53;
					border-radius: 16rpx;

					.text_3 {
						margin-left: 24rpx;
						line-height: 26.16rpx;
					}
				}

				.pos_2 {
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
				}
			}

			.font_2 {
				font-size: 22rpx;
				font-family: SF Pro Display;
				font-weight: 300;
				color: #ffffff;
			}

			.text_4 {
				margin-top: 20rpx;
			}

			.group_6 {
				.group_7 {
					.text_5 {
						font-weight: 700;
					}
				}

				.section {
					padding: 28rpx 24rpx 24rpx;
					background-color: #1b1d53;
					border-radius: 16rpx;
					.group_8 {
						padding: 0 4rpx;

						.text_7 {
							color: #5ceec4;
							font-size: 72rpx;
							font-family: SF Pro Display;
							font-weight: 700;
						}

						.text_9 {
							font-size: 20rpx;
							width: 100%;
						}
					}

					.divider {
						background-color: #b0b1bf24;
						height: 2rpx;
					}
				}

				.section_2 {
					padding: 20rpx 24rpx 8rpx;
					background-color: #1b1d53;
					border-radius: 16rpx;

					.text_11 {
						font-weight: 300;
					}

					.text_10 {
						margin-left: 20rpx;
						color: #5ceec4;
						font-size: 24rpx;
						font-family: SF Pro Display;
						font-weight: 100;
					}

					.image_5 {
						width: 32rpx;
						height: 32rpx;
					}

					.text_12 {
						color: #ffffff;
						font-size: 18rpx;
						font-family: SF Pro Display;
						font-weight: 300;
					}
				}
			}

			.font {
				font-size: 28rpx;
				font-family: SF Pro Display;
				font-weight: 700;
				color: #ffffff;
			}

			.image_4 {
				width: 48rpx;
				height: 48rpx;
			}

			.font_3 {
				font-size: 22rpx;
				font-family: SF Pro Display;
				font-weight: 300;
				color: #7f819d;
			}

			.text_8 {
				opacity: 0.5;
			}

			.text_13 {
				margin-top: 32rpx;
				color: #ffffff;
				font-size: 24rpx;
			}
		}

		.section_3 {
			padding: 0 32rpx 32rpx;
			background-color: #1b1d53;

			.group_9 {
				margin-right: 4rpx;
				padding: 32rpx 0;

				.section_4 {
					background-color: #ffffff;
					border-radius: 50%;
					width: 32rpx;
					height: 32rpx;
				}

				.group_10 {
					height: 52.22rpx;

					.font_5 {
						font-size: 22rpx;
						font-family: SF Pro Display;
						font-weight: 300;
						color: #838383;
					}

					.text_15 {
						margin-left: 8rpx;
						font-weight: 600;
					}

					.text_14 {
						margin-left: 4rpx;
					}
				}
			}

			.text-wrapper_2 {
				padding: 28rpx 0;
				background-color: #5ceec4;
				border-radius: 44rpx;
				margin-top: 32rpx;
				.text_16 {
					color: #000000;
					font-size: 32rpx;
					font-family: SF Pro Display;
					font-weight: 700;
				}
			}
		}

		.font_4 {
			font-size: 22rpx;
			font-family: SF Pro Display;
			color: #ffffff;
		}
	}
</style>